<template>
  <div class="cartBox">
    <rh-switch @change="change"></rh-switch>
    <img :src="goodsImg">
    <p class="name">{{ goodsName }}</p>
    <div class="priceBox">
      <p class="origin">{{ goodsOrigin }}</p>
      <p class="price">{{ goodsPrice }}</p>
    </div>
    <p class="user">{{ username }}</p>
    <el-input-number v-model="goodsCount"
                     :min="1"
                     :max="goodsAmount"
                     @change="handleChange"></el-input-number>
    <span @click="del"
          class="del">删除</span>
  </div>
</template>

<script>
import RhSwitch from '@/components/basic/rh-switch'
export default {
  components: {
    RhSwitch
  },
  props: ['info'],
  data () {
    return {
      list: this.info,
      goodsName: '',
      goodsImg: '',
      goodsCount: this.info.goodsCount,
      username: '',
      goodsPrice: '',
      goodsOrigin: '',
      goodsAmount: '',
      target: false,
    }
  },
  created () {
    this.$http.post('http://localhost:3000/goodsInfo', { id: this.list.goodsId }).then(response => {
      let _info = response.data.data;
      this.username = _info.goodsUser;
      this.goodsName = _info.goodsName;
      this.goodsImg = _info.goodsImages[0].url
      this.goodsPrice = _info.goodsPrice;
      this.goodsOrigin = _info.goodsOrigin;
      this.goodsAmount = _info.goodsAmount;
    })
  },
  methods: {
    del () {
      this.$http.post('http://localhost:3000/users/delCart', { goodsId: this.list.goodsId }).then(response => {
        this.$emit('del');
        alert('删除成功')
      })
    },
    change (target) {
      this.target = target;
      let price = this.goodsPrice * this.goodsCount;
      let obj = {
        goodsId: this.info.goodsId,
        goodsCount: this.goodsCount,
        goodsUser: this.username,
        buyer: localStorage.getItem('username')
      }
      if (target) {
        this.$store.commit('changePrice', [price, 'on']);
        this.$emit('check', [obj, 'on'])
      } else {
        this.$store.commit('changePrice', [-price, 'on']);
        this.$emit('check', [obj, 'off'])
      }
    },
    handleChange (cur, old) {
      if (this.target) {
        let obj = {
          goodsId: this.info.goodsId,
          goodsCount: this.goodsCount,
          goodsUser: this.username,
          buyer: localStorage.getItem('username')
        }
        let dis = cur - old;
        let price = this.goodsPrice * dis;
        this.$store.commit('changePrice', [price, 'off'])
        this.$emit('check', [obj, 'update'])
      }
    }
  }
}
</script>

<style lang="less" scoped>
.cartBox {
  margin: 10px auto;
  width: 1060px;
  height: 100px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;

  img {
    width: 80px;
    height: 80px;
    margin-right: 20px;
  }
  .name {
    width: 240px;
    padding: 10px 0;
    margin-right: 20px;
  }
  .priceBox {
    width: 120px;
    margin-right: 20px;
  }
  .origin {
    display: inline-block;
    text-decoration-line: line-through;
    font-size: 14px;
    margin-right: 5px;
  }
  .price {
    display: inline-block;
    color: #f00;
  }
  .user {
    width: 200px;
    padding: 10px 0;
    margin-right: 20px;
  }
  .del {
    padding: 5px 10px;
    cursor: pointer;
    margin: 0 20px;
  }
}
</style>